/**         .----.
 *       _.'__    `.
 *   .--($)($$)---/#\
 * .' @          /###\
 * :         ,   #####
 *  `-..__.-' _.-\###/
 *        `;_:    `"'
 *      .'"""""`.
 *     /,     ,\\
 *    //  !BUG  \\
 *    `-._______.-'
 *    ___`. | .'___
 *   (______|______)
 *
 * 邮件自动补全-JS
 * @author kwun
 * @email 527565073@qq.com
 */

+(function($){
    var pluginName = "autoMail",
        _default = {
            deValue : '请输入邮箱地址', 
            textCls : 'text-gray', 
            listCls : 'list-mail', 
            listTop : 1, 
            mailArr : ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"]
        }

    var autoMail = function(elem,options){
        this.elem    = elem; //Dom对象
        this.$elem   = $(this.elem); //jquery对象
        this.options = $.extend({},_default,options || "");
        this.$value  = ''; 
        this.$list   = '';
        this.$index  = -1; 
        this.$width  = this.$elem.outerWidth(); 
        this.$height = this.$elem.outerHeight(); 
        this.$left   = this.$elem.offset().left; 
        this.$top    = this.$elem.offset().top; 

        this.init();
    }

    autoMail.prototype = {
        init:function(){
            var _this = this;
            this.$elem.val(this.options.deValue)
            this.$elem.bind('click',{myOptions:this.options},function(e){
                var $options = e.data.myOptions;
                _this.$elem.select().removeClass($options.textCls);
                if(_this.$elem.val() != $options.deValue){
                    _this.add();
                    _this.order(_this.$value); 
                    _this.$list.find('.item').each(function(){ 
                        if($(this).text() == _this.$elem.val()){ 
                            $(this).siblings('.item').removeClass('select'); 
                            $(this).addClass('select'); 
                            return false; 
                        } 
                    }) 
                } 
                e.stopPropagation(); 
            })

            this.$elem.blur({myOptions:this.options},function(e){ 
                var $options = e.data.myOptions;
                if(_this.$elem.val() == '' || _this.$elem.val() == $options.deValue){ 
                    alert($options.deValue) 
                    _this.$elem.val($options.deValue).addClass($options.textCls); 
                } 
            }) 

            //文本域键盘松开事件 
            this.$elem.keyup(function(e){
                if(_this.$list.length == 0){ 
                    _this.add(); 
                } 
                if(_this.$list.length > 0){ 
                    var keyCode = e.keyCode; 
                    //alert(keyCode) 
                    switch(keyCode){ 
                        case 13: 
                            _this.remove(); 
                            _this.$elem.blur(); 
                            break; 
                        case 38: 
                            _this.$index--; 
                            if(_this.$index < 0){ 
                                _this.$index = 0; 
                            } 
                            _this.keyOperate(_this.$index); 
                            break; 
                        case 40: 
                            _this.$index++; 
                            if(_this.$index > $('.item',_this.$list).length - 1){ 
                                _this.$index = ('.item',_this.$list).length - 1 
                            } 
                            _this.keyOperate(_this.$index); 
                            break; 
                        default: 
                            if(_this.$elem.val().indexOf('@') < 0){ 
                                _this.$value = _this.$elem.val(); 
                                _this.order(_this.$value);      
                            }     
                    }   
                } 
            }) 

            $(document).click(function(){ 
                if($(_this.$list).length > 0){ 
                    _this.remove(); 
                    _this.$elem.blur(); 
                } 
            }) 

        },
        create:function(){
            var _this = this;
            var li = ''; 
            for(var i = 0; i < this.options.mailArr.length; i++){ 
                li += '<li class="item">'+ '<span class="style">' + '@' + this.options.mailArr[i] + '</span>' + '</li>'; 
            } 
            this.$list = $('<div class="'+ this.options.listCls +'"><ul>'+ li +'</ul></div>'); 
            this.$list.css({ 
                'position' : 'absolute', 
                'left'     : this.$left, 
                'top'      : this.$top + this.$height + this.options.listTop, 
                'min-width': this.$width 
            }) 
            this.$list.appendTo($('body')); 
            //邮箱列表绑定事件 
            this.$list.find('.item').click(function(event){ 
                _this.getVal($(this)); 
                _this.remove(); 
                event.stopPropagation(); 
            }) 
            this.$list.find('.item').hover( 
                function(){ $(this).addClass('hover'); }, 
                function(){ $(this).removeClass('hover'); } 
            ) 
            return this.$list; 
        },
        order:function(_value){
            $('.name',this.$list).remove(); 
            var name = $('<span class="name">'+ _value +'</span>'); 
            $('.item',this.$list).prepend(name); 
        },
        add:function(){
            if(typeof this.$list == 'undefined' || this.$list.length < 1) this.create(); 
        },
        remove:function(){
            if(this.$list.length > 0){ 
                this.$list.remove(); 
                delete this.$list; 
            } 
        },
        getVal:function(obj){
            if($('.name',obj).text() != ''){ 
                var selectValue = obj.text(); 
                this.$elem.val(selectValue);   
            }else{ 
                return false; 
            } 
        },
        keyOperate:function(){
            $('.item',this.$list).eq(this.$index).addClass('hover').siblings('.item').removeClass('hover'); 
            this.$elem.val($('.item',this.$list).eq(this.$index).text()); 
        }
    }

    $.fn[pluginName]=function(options){
        return this.each(function(){
           new autoMail(this,options)
        })
    }
    
})(jQuery)